import Addition2 from '@/components/Addition2';
import {s_saveMaterialUserDefine, s_getMaterialCategoryTree, s_getMaterialDocument, s_getMaterialUserDefine, s_getOrgTargetKeysGlobal, s_getOrgTransferData, s_saveAllocateOrgGlobal, s_saveMaterialInfo, s_saveUnitData, getCommTreeByXid } from '@/services/basis';
import { getSelection } from '@/services/selections';
import { ActionType, ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormInstance, ProFormRadio, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import { useModel, useRequest } from '@umijs/max';
import { Card, theme,Row,Col,Tree, Space, Button, Form, Input, Modal, Radio, Select, DatePicker, Drawer, Transfer, Divider, Checkbox, Tabs, TabsProps, message, Tag} from 'antd';
import Table, { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import moment from 'moment';
import React, { useRef, useState } from 'react';

//物料分类组件
 function CategoryTree(props:any){
  return(
    <Tree treeData={props.tdata}  
     defaultExpandAll={true} blockNode={true}
          onClick={(e,node)=>{props.getTreeInfo(node);}}/>
  );
}


//物料档案表组件-- 注意：table_ref用于外部控制表格还原
// function MaterialTable({tdata,setMaterialCode,table_ref}){
  function MaterialTable(props:any){
  interface DataType{
    vouchcode?:string,
    custom?:string,
    business?:string,
    x_id?:number,
    id?:number, 
    cate_id?:number,
    code?:string,
    name?:string,
    scode?:string,
    cate_code?:string,
    invstd?:string,
    invstd2?:string,
    brand?:string,
    isservice?:number,
    isfee?:number,
    munit_code?:string,
    aunit_code?:string,
    rate?:number,
    status?:number,
    operate_time?:string,
    operater_code?:string,
    //以下4个为视图中添加
    cate_name?:string,
    operater_name?:string,
    munit_name?:string,
    aunit_name?:string,
    //订单数及替代物料
    quantity?:number,
    quantity_un?:number,
    quantity_qt?:number,
    t_quantity_td?:number,
    t_code?:string,
    t_name?:string,
    t_invstd?:string,
    t_munit_name?:string,
    t_quantity?:number,
    t_rate?:string,
    t_quantity_done?:number,
  }

   const columns:ProColumns<DataType>[]=[
    {
      dataIndex:'vouchcode',
      title:'销售单号',
    },
    {
        dataIndex:'custom',
        title:'客户',
      },
      {
        dataIndex:'business',
        title:'业务员',
      },
    {
      dataIndex:'code',
      title:'SKU编码',
    }, {
      dataIndex:'name',
      title:'商品名称',
    }, 
   {
      dataIndex:'invstd',
      title:'包装规格',
    },{
      dataIndex:'invstd2',
      title:'型号',
    },
    {dataIndex:'munit_name',title:'计量单位'},
    {dataIndex:'quantity',title:'订单数量'},
    {dataIndex:'quantity_qt',title:'齐套数量'},
    {dataIndex:'quantity_un',title:'未齐套数量'},
    {
      dataIndex:'status',
      title:'状态',
       
      render:(text)=>text===1?<>启用</>:<Space style={{color:'red'}}>{text===2?<>停用</>:<>删除</>}</Space>,
    },
   ];

   return(
      <ProTable 
      dataSource={props.tdata} 
      columns={columns} 
      rowKey='id' 
      rowSelection={{
        type:'radio',
        onChange:(selectedKeys,selectedRows)=>{props.setMaterialCode(selectedRows)},
      }}
      scroll={{y:350}}
      options={false}
      actionRef={props.table_ref}
      pagination={{
        size:'small',
        pageSize:5,
      }}
      search={false}
      />
     // onRow={(record)=>{return{onClick:()=>setMaterialCode(record.code)}}} />
   );

}

//物料档案表组件-- 注意：table_ref用于外部控制表格还原
// function MaterialTable({tdata,setMaterialCode,table_ref}){
    function MaterialTable2(props:any){
        interface DataType{
          vouchcode?:string,
          custom?:string,
          business?:string,
          x_id?:number,
          id?:number, 
          cate_id?:number,
          code?:string,
          name?:string,
          scode?:string,
          cate_code?:string,
          invstd?:string,
          invstd2?:string,
          brand?:string,
          isservice?:number,
          isfee?:number,
          munit_code?:string,
          aunit_code?:string,
          rate?:number,
          status?:string,
          operate_time?:string,
          operater_code?:string,
          //以下4个为视图中添加
          cate_name?:string,
          operater_name?:string,
          munit_name?:string,
          aunit_name?:string,
          //订单数及替代物料
          quantity?:number,
          quantity_un?:number,
          quantity_qt?:number,
          t_quantity_td?:number,
          t_code?:string,
          t_name?:string,
          t_invstd?:string,
          t_munit_name?:string,
          t_quantity?:number,
          t_rate?:string,
          t_quantity_done?:number,
          state?:string,
        }
      
         const columns:ProColumns<DataType>[]=[
           
          {
            dataIndex:'code',
            title:'SKU编码',
          }, {
            dataIndex:'name',
            title:'商品名称',
          }, 
         {
            dataIndex:'invstd',
            title:'包装规格',
          },{
            dataIndex:'invstd2',
            title:'型号',
          },
          {dataIndex:'munit_name',title:'计量单位'},
          {dataIndex:'quantity',title:'需求数量'},
           {dataIndex:'t_quantity',title:'可用数量'},
          {dataIndex:'t_quantity_td',title:'替代数量'},
          {
            dataIndex:'state',
            title:'状态',
             
            render:(text)=>text==='欠料'?<Tag color='red' style={{width:80}}>欠料</Tag>:<>齐料</>,
          },
         ];
      
         return(
            <ProTable 
            dataSource={props.tdata} 
            columns={columns} 
            rowKey='id' 
            rowSelection={{
              type:'radio',
              onChange:(selectedKeys,selectedRows)=>{props.setMaterialCode(selectedRows)},
            }}
            scroll={{y:350}}
            options={false}
            actionRef={props.table_ref}
            pagination={{
              size:'small',
              pageSize:5,
            }}
            search={false}
            />
           // onRow={(record)=>{return{onClick:()=>setMaterialCode(record.code)}}} />
         );
      
      }

      function MaterialTable3(props:any){
        interface DataType{
          vouchcode?:string,
          custom?:string,
          business?:string,
          x_id?:number,
          id?:number, 
          cate_id?:number,
          code?:string,
          name?:string,
          scode?:string,
          cate_code?:string,
          invstd?:string,
          invstd2?:string,
          brand?:string,
          isservice?:number,
          isfee?:number,
          munit_code?:string,
          aunit_code?:string,
          rate?:number,
          status?:number,
          operate_time?:string,
          operater_code?:string,
          //以下4个为视图中添加
          cate_name?:string,
          operater_name?:string,
          munit_name?:string,
          aunit_name?:string,
          //订单数及替代物料
          quantity?:number,
          quantity_un?:number,
          quantity_qt?:number,
          t_quantity_td?:number,
          t_code?:string,
          t_name?:string,
          t_invstd?:string,
          t_munit_name?:string,
          t_quantity?:number,
          t_rate?:string,
          t_quantity_done?:number,
        }
      
         const columns:ProColumns<DataType>[]=[
           
          {
            dataIndex:'code',
            title:'SKU编码',
          }, {
            dataIndex:'name',
            title:'商品名称',
          }, 
         {
            dataIndex:'invstd',
            title:'包装规格',
          },{
            dataIndex:'invstd2',
            title:'型号',
          },
          {dataIndex:'munit_name',title:'计量单位'},
          {dataIndex:'quantity',title:'数量'},
          {dataIndex:'t_rate',title:'替代比例'},
          {dataIndex:'t_quantity_done',title:'替代数量'},
          {
            dataIndex:'status',
            title:'状态',
             
            render:(text)=>text===1?<>启用</>:<Space style={{color:'red'}}>{text===2?<>停用</>:<>删除</>}</Space>,
          },
         ];
      
         return(
            <ProTable 
            dataSource={props.tdata} 
            columns={columns} 
            rowKey='id' 
            rowSelection={{
              type:'radio',
              onChange:(selectedKeys,selectedRows)=>{props.setMaterialCode(selectedRows)},
            }}
            scroll={{y:350}}
            options={false}
            actionRef={props.table_ref}
            pagination={{
              size:'small',
              pageSize:5,
            }}
            search={false}
            />
           // onRow={(record)=>{return{onClick:()=>setMaterialCode(record.code)}}} />
         );
      
      }
         

//物料自由项表，作为定义项--要调出所有自由项，并勾选
function MaterialUserDefine(props:any){

 //监控自定义值的变化.type代表更新的字段：1 item_id,2 ismust,3 status
 function update(e:any,id:number,type:number){
  const x=props.udata.map((item:any)=>{
      if(item.userdefine_id===id){
          if(type===1)
              return {...item,item_code:e.target.checked?1:0};
          else if(type===2)
              return {...item,ismust:e.target.value};
          else
              return {...item,status:e.target.value};
      }
     else
         return item;
  });

  //更新新值到staate, 同步渲染新表格--关键
  props.setUdata(x);
}

   interface DataType{
    apply_id:number,
    item_code:number,
    status:number,
    ismust:number,
    userdefine_id:number,
    code:string,
    name:string,
    //默认物料source_type=1
   } ;

   const columns:ProColumns<DataType>[]=[
    {
      dataIndex:'userdefine_id',
      title:'ID',
    },
    {
      dataIndex:'code',
      title:'自由项编码',
    },
    {
      dataIndex:'name',
      title:'自由项名称',
    },
    {
      dataIndex:'item_code',
      title:'选择',
      render:(text,record)=>
      <Checkbox checked={text===1?true:false} 
      // disabled={record.status===1?false:true}
          onChange={(e)=>update(e,record.userdefine_id,1)}>
      </Checkbox>
      
    },
    {
      dataIndex:'ismust',
      title:'取值类型',
      render:(text,record)=><Radio.Group value={text}  
      // disabled={record.status===1?false:true}
      onChange={(e)=>update(e,record.userdefine_id,2)}>
                        <Radio value={1}>必填</Radio>
                        <Radio value={0}>非必填</Radio>
                     </Radio.Group>
    },
    {
      dataIndex:'status',
      title:'状态',
      render:(text,record)=><Radio.Group value={text} 
      // disabled={text===1?false:true}
      onChange={(e)=>update(e,record.userdefine_id,3)}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>冻结</Radio>
                        <Radio value={3}>非选项</Radio>
                    </Radio.Group>
    },
   ];  

  // alert('这是控件内：'+JSON.stringify(udata));
   return(
    <ProTable 
    dataSource={props.udata} 
    columns={columns} 
    rowKey='id' 
   // rowSelection={{
    //  type:'radio',
    //  onChange:(selectedKeys,selectedRows)=>setUdata(selectedRows),    
   //  }}
    //onRow={(record)=>{return{onClick:()=>setUdata(record)}}}
    />
   );
}
 

const Welcome: React.FC = () => {
    interface DataType{
        vouchcode?:string,
        custom?:string,
        business?:string,
        x_id?:number,
        id?:number, 
        cate_id?:number,
        code?:string,
        name?:string,
        scode?:string,
        cate_code?:string,
        invstd?:string,
        invstd2?:string,
        brand?:string,
        isservice?:number,
        isfee?:number,
        munit_code?:string,
        aunit_code?:string,
        rate?:number,
        status?:number,
        operate_time?:string,
        operater_code?:string,
        //以下4个为视图中添加
        cate_name?:string,
        operater_name?:string,
        munit_name?:string,
        aunit_name?:string,
        //订单数及替代物料
        quantity?:number,
        quantity_un?:number,
        quantity_qt?:number,
        t_quantity_td?:number,
        t_code?:string,
        t_name?:string,
        t_invstd?:string,
        t_munit_name?:string,
        t_quantity?:number,
        t_rate?:string,
        t_quantity_done?:number,
        state?:string,
      }
   
      const tdata:DataType[]=[
        {vouchcode:'X2035521',custom:'亚马逊A01',business:'张小小',code:'J2023989',name:'飞机挂链',
            invstd:'1*26*23.5镶银',munit_name:'只',quantity:500,quantity_qt:500,quantity_un:0,status:1,
        },
      ];

      const tdata2:DataType[]=[
        {code:'G2023989',name:'挂链',state:'齐料',
            invstd:'25*32',munit_name:'条',quantity:500,t_quantity:450,t_quantity_td:50,quantity_un:0,
        }, {code:'Z2023989',name:'水钻',state:'齐料',
            invstd:'6*5彩晶',munit_name:'只',quantity:500,t_quantity:500,t_quantity_td:0,quantity_un:0,
        }, {code:'B668855',name:'挂牌',state:'欠料',
            invstd:'AMOZON-6',munit_name:'只',quantity:500,t_quantity:500,t_quantity_td:0,quantity_un:0,
        },
      ];

      const tdata3:DataType[]=[
        {code:'F115256',name:'X挂链',
            invstd:'25*30',munit_name:'条',quantity:50,t_rate:'1/1',t_quantity_done:50,
        },
      ];

//   主窗体=================================================================================
  return<>
     
      <Card title='销售订单齐套检查'  style={{height:300,overflow:'auto'}} id='drawer_id'
       
      extra={<Space size='large'>
      <Button>执行齐套检查</Button>
      <Button>齐套转生产计划</Button>
      <Button>齐套转包装派工</Button>

      {/* <Button  onClick={()=>allocateOrg()}>分配组织</Button> */}
      
      </Space>}
      >
     
       <MaterialTable tdata={tdata}  />
 

      </Card>
      <Card title='齐套明细物料'  style={{height:300,overflow:'auto'}} id='drawer_id'>
             <MaterialTable2 tdata={tdata2} />
      </Card>
      <Card title='替代物料'  style={{height:300,overflow:'auto'}} id='drawer_id'>
             <MaterialTable3 tdata={tdata3} />
      </Card>
      
    
     

     
  </>
};

export default Welcome;


